<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" v-if="address" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" :editable="false" />

  <!-- 商品卡片 -->
  <van-form @submit="submit">
    <div v-for="(item, key) in product">
      <van-card
        :title="item.products.name"
        :thumb="item.products.thumbs_text"
        :num="item.pronum"
      >
        <template #title>
          <div class="title">{{item.products.name}}</div>
        </template>
        
        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
          <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
        </template>

        <template #tags>
          <div class="price">单价：￥{{item.price}}</div>
        </template>

        <template #price>
          <div class="price">合计：￥{{item.total}}</div>
        </template>
      </van-card>
      <van-divider></van-divider>
      <div>
        <van-field class="up" label="描述相符" label-align="left" input-align="center" label-class="ams">
            <template #input >
              <van-rate v-model="rate[`${item.id}`]" :readonly="order.status == '3' ? false : true" />
            </template>
        </van-field>

        <van-field 
          v-model="remark[`${item.id}`]"
          rows="2"
          autosize
          label="评论内容"
          left-icon="smile-o"
          placeholder="从多个角度评论商品，可以帮助更多想买的人"
          type="textarea"
          maxlength="120"
          show-word-limit
          :rules="[{required: true, message: '请输入评论内容'}]"
          
        />

        <van-field name="thumbs" label="评论图片">
          <template #input>
            <van-uploader 
              v-model="thumbs[`${item.id}`]"
              multiple :max-count="9"
              :readonly="order.status == '3' ? false : true"
              :deletable="order.status == '3' ? true : false"
            />
          </template>
        </van-field>
      </div>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"></van-divider>
    </div>

    <div v-if="order.status == '3'" style="width:50%;margin:2em auto;">
          <van-button :loading="loading" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
    </div>
  </van-form>

</template>

<script setup>

import { readonly } from 'vue';

  const {proxy} = getCurrentInstance()

  let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
  let address = ref(null)
  let product = ref([])
  let order = ref({})

  let rate = ref([])
  let remark = ref([])
  let thumbs = ref([]) 
  let loading = ref(false)
  
  onMounted(() => {
    OrderData()
  })
  const OrderData = async () => {
    var params = {
      orderid,
      busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
      url: 'order/info',
      params
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    address.value = result.data.address
    order.value = result.data.order

    if(result.data.product)
    {
      result.data.product.map(item => {
        item.attrs = JSON.parse(item.attrs)
        if(order.status == '3')
        {
          remark.value[`${item.id}`] = ''
          rate.value[`${item.id}`] = 0
          thumbs.value[`${item.id}`] = []
        }else
        {
          var pic = []
          item.thumbs_text.map(item => {
            pic.push({url: item})
          })
          
          remark.value[`${item.id}`] = item.comment
          rate.value[`${item.id}`] = parseInt(item.rate)
          thumbs.value[`${item.id}`] = pic
        }
      })
    }
    product.value = result.data.product
  }

  const submit = async (values) =>
  {
    loading = true

    var list = []

    for(var item of product.value)
    {
      var pic = []

      if(thumbs.value[`${item.id}`] && thumbs.value[`${item.id}`].length > 0)
      {
        thumbs.value[`${item.id}`].map(p => pic.push(p.file))
      }

      var value = {
        id: item.id,
        comment: remark.value[`${item.id}`],
        rate: rate.value[`${item.id}`],
        thumbs: pic
      }

      list.push(value)
    }

    var success = 0
    var error = 0

    for(var params of list)
    {
      var result = await proxy.$UPLOAD({url: '/order/comment', params})

      if(result.code == 0)
      {
        error++
      }else
      {
        success++
      }
    }

    console.log(result)
    loading = false

    proxy.$success({
      message:`成功评论 ${success}条 失败评论 ${error}`,
      onClose: () => proxy.$router.go(-1)
    })
  }
  

</script>

<style scoped>
  @import url('/assets/css/OrderInfo.css');
  ::v-deep .van-field__label {
    margin-right: 0;
    width: 20%;
  }
  ::v-deep .ams{
    transform: translateX(80%);
  }

</style>